<template>
	<view class="rotate-for-portrait" v-if="modelDescList&&modelDescList.length>0&&!orientation">
		<swiper class="swiper-box" :vertical="true" @change="swiperChange">
			<swiper-item>
				<view class="swiper-item">
					<image :src="lcResultBg" mode="aspectFill" class="lc-result-bg"></image>
					<image :src="lcResultCover" mode="aspectFill" class="lc-result-cover"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="standBg" mode="aspectFill" class="stand-bg"></image>
					<image :src="roundLight" mode="" class="round-light"></image>
					<image :src="filmBg" mode="" class="film-bg"></image>
					<!-- <view class="answer-result" v-if="currentIndex==1"
						v-html="initRichText(modelDescList[currentIndex-1].modelDesc)" ></view> -->
					<!-- style="transform: scale(.83);" :style="{height:pmHeight>700?'0':'50rpx'}" -->
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="" class="answer-result-image" v-if="currentIndex==1"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="standBg" mode="aspectFill" class="stand-bg"></image>
					<image :src="roundLight" mode="" class="round-light"></image>
					<image :src="filmBg" mode="" class="film-bg"></image>
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="" class="answer-result-image" v-if="currentIndex==2"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="standBg" mode="aspectFill" class="stand-bg"></image>
					<image :src="roundLight" mode="" class="round-light"></image>
					<image :src="filmBg" mode="" class="film-bg"></image>
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="" class="answer-result-image" v-if="currentIndex==3"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="standBg" mode="aspectFill" class="stand-bg"></image>
					<image :src="roundLight" mode="" class="round-light"></image>
					<image :src="filmBg" mode="" class="film-bg"></image>
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="" class="answer-result-image" v-if="currentIndex==4"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="standBg" mode="aspectFill" class="stand-bg"></image>
					<image :src="roundLight" mode="" class="round-light"></image>
					<image :src="filmBg" mode="" class="film-bg"></image>
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="" class="answer-result-image" v-if="currentIndex==5"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="lcLast4" mode="aspectFill" class="lc-last-4"></image>
					<image :src="lcLast1" mode="" class="lc-last-1"></image>
					<image :src="modelDescList[currentIndex-1].modelDesc" mode="aspectFit" class="answer-result-image" v-if="currentIndex==6"></image>
					<!-- style="left:150rpx;transform: scale(.68);" :style="{height:pmHeight>700?'0':'50rpx'}" -->
				</view>
			</swiper-item>
		</swiper>
		<image :src="getBisscopeImg(currentIndex-1)" mode="aspectFill" class="bioscope-wd"
			v-if="currentIndex!=0&&currentIndex!=modelDescList.length"></image>
	</view>
	<view class="" v-else style="width: 100%;padding-top: 200rpx;color: brown;font-size: 34rpx;text-align: center;">
		{{orientation}}
	</view>
</template>

<script>
	import {
		formatRichText
	} from '@/common/utils/util.js'
	const imgBaseURL = 'https://webstatic.feifanxinli.com/public_test/images/knowme'
	import {
		resultShow,
	} from '@/common/api/scl_api.js';
	export default {
		data() {
			return {
				bioscopeImg: ['/result/bioscope1.png', '/result/bioscope2.png', '/result/bioscope3.png',
					'/result/bioscope4.png', '/result/bioscope5.png'
				],
				filmBg: imgBaseURL + '/result/filmBg.png',
				lcLast1: imgBaseURL + '/result/lcLast1.png',
				lcLast2: imgBaseURL + '/result/lcLast2.png',
				lcLast4: imgBaseURL + '/result/lcLast4.jpg',
				lcResultBg: imgBaseURL + '/result/lcResultBg.jpg',
				lcResultCover: imgBaseURL + '/result/lcResultCover.png',
				roundLight: imgBaseURL + '/result/roundLight.png',
				standBg: imgBaseURL + '/result/standBg.jpg',
				reportId: '',
				sclId: '',
				modelDescList: null,
				currentIndex: 0,
				orientation: '',
				pmHeight: uni.getSystemInfoSync().screenHeight
			}
		},
		onLoad(options) {
			console.log(uni.getSystemInfoSync().screenHeight, '-------8888888');
			resultShow({
				reportId: options.reportId,
				sclId: options.sclId
			}).then(res => {
				this.modelDescList = res.data.data.resultList[0].modelDescList
				this.modelDescList.map(item=>{
					let htmlContent= item.modelDesc;
					const imgSrcRegex = /<img[^>]+src="([^"]+)"/i;
					const match = imgSrcRegex.exec(htmlContent);
					let imageUrl = '';
					if (match && match[1]) {
						item.modelDesc = match[1].replace('http://ffxl.oss-cn-shanghai.aliyuncs.com',
							'https://image.feifanxinli.com');
						console.log('提取的图片链接:', imageUrl.replace('http://ffxl.oss-cn-shanghai.aliyuncs.com',
							'https://image.feifanxinli.com'));
					} else {
						console.log('未找到图片链接');
					}
				})
				console.log(this.modelDescList+'11未找到图片链接');
			})
		},
		onShow() {
			// 监听屏幕方向变化
			uni.onWindowResize((res) => {
				if (res.size.windowWidth > res.size.windowHeight) {
					this.orientation = '请锁定屏幕并保持竖屏完成测评';
					// this.$showToast('横屏模式')
					// 在这里处理横屏逻辑
				} else {
					this.orientation = '';
					// this.$showToast('竖屏模式')
					// 在这里处理竖屏逻辑
				}
			});
		},
		onUnload() {
			uni.offWindowResize();
		},
		methods: {
			initRichText() {
				let htmlContent;
				if (this.currentIndex - 1 >= 0) {
					htmlContent = this.modelDescList[this.currentIndex - 1].modelDesc
				}
				// // 去掉img标签里的style、width、height属性
				// let newContent = html.replace(/\<img/gi,'<img style="width: 603px;height: 375px;display:block;position: absolute;left: 0;top:0;bottom:0;"');
				// 使用正则表达式提取图片链接
				const imgSrcRegex = /<img[^>]+src="([^"]+)"/i;
				const match = imgSrcRegex.exec(htmlContent);
				let imageUrl = '';
				if (match && match[1]) {
					const imageUrl = match[1].replace('http://ffxl.oss-cn-shanghai.aliyuncs.com',
						'https://image.feifanxinli.com');
					console.log('提取的图片链接:', imageUrl.replace('http://ffxl.oss-cn-shanghai.aliyuncs.com',
						'https://image.feifanxinli.com'));
				} else {
					console.log('未找到图片链接');
				}
				return imageUrl;
			},
			swiperChange(event) {
				this.currentIndex = event.detail.current
			},
			getBisscopeImg(index) {
				return imgBaseURL + this.bioscopeImg[index]
			}
		}
	}
</script>

<style>
	.lc-last-4 {
		width: 100vh;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}

	.lc-last-1 {
		width: 100vh;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}

	.answer-result {
		position: absolute;
		left: 0;
		top: 0;
	}

	.answer-result-image {
		width: 1206rpx;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	>>>.answer-result img {
		width: 100vh !important;
		height: 750rpx !important;
		/* object-fit: contain; */
		/* position: absolute; */
		/* left: 0;
		right: 0; */
	}

	.bioscope-wd {
		width: 750rpx;
		height: 350rpx;
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		pointer-events: none;
	}

	.film-bg {
		width: 100vh;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.round-light {
		width: 100vh;
		height: 750rpx;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}

	.stand-bg {
		width: 100vh;
		height: 750rpx;
		display: block;
	}

	.swiper-item {
		width: 100vh;
		/* 原来的高度 */
		height: 750rpx;
		/* 原来的宽度 */
		position: fixed;
		top: 0;
		left: 100%;
		transform: rotate(90deg);
		transform-origin: top left;
		background-size: cover;
		background-position: center;
	}

	.swiper-box {
		width: 750rpx;
		/* 原来的高度 */
		height: 100vh;
	}

	.lc-result-cover {
		width: 1119rpx;
		height: 750rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.lc-result-bg {
		width: 100vh;
		height: 750rpx;
	}

	.rotate-for-portrait {
		position: relative;
		background-color: #172228;
	}
</style>